<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
</head>

<body>

    <!-- form -->
    <!-- P5.4 P5.5 -->
    <!-- name 在HTML5中唯一定义一个表单 -->
    <!-- id -->
    <!-- action：URL 缺失，url是其自身 -->
    <!-- 参数：由表单中的元素的name提供，以“name=value”的形式出现在url上，如果有多个，中间还要使用“&”连接 -->
    <!-- method：1)get 默认，3000字符；2)post -->
    <!-- aucomplete：自动完成 -->
    <!-- novalidate：不验证 -->
    <!-- target：_blank（新窗口）, _self（当前窗口，默认）, _parent（父窗口，iframe嵌套）, _top（body窗口，iframe嵌套）, frame_name（当前页面的其他iframe窗口） -->
    <form name="name_qq_register" id="id_qq_register" action="qq_register.html" method="">
        <input type="text" name="name" id="" value="懒羊羊" placeholder="昵称" required /> <br>
        <input type="text" name="password" id="" value="" placeholder="密码" autofocus /> <br>
        <input type="url" name="website" id="" value="" placeholder="网址" autofocus /> <br>
        <input type="email" name="email" id="" value="" placeholder="邮箱" multiple="multiple" /> <br>
        <input type="tel" name="tel" id="" pattern="^132\d{8}$" placeholder="电话号码 132********"> 正则表达式 <br>
        <input type="reset" name="" id="" value="重置" style="min-width: 175px;" />
        <input type="submit" name="" id="" value="注册" style="min-width: 175px;" />
        <input type="button" name="" id="" value="xxxx" style="min-width: 175px;" />
    </form>
    <hr>

    <!-- input -->
    <!-- type:text -->
    <!-- type:password -->
    <!-- type:radio 单选框，同一组单选按钮name必须相同，checked选中-->
    <!-- type:checkbox复选框，无分组，checked选中-->
    <!-- type:url -->
    <!-- type:emailmultiple，逗号，支持多个邮箱 -->
    <!-- type:rangemin，max， -->
    <!-- type:date, time -->
    <!-- type:number min，max， -->
    <!-- type:tel -->
    <!-- type:image -->
    <!-- type:button, type:submit, type:reset -->
    <!-- P5.6 P5.7 P5.8 P5.9 P5.10 -->
    <form action="" method="post" novalidate="novalidate" autocomplete="off" target="_blank">
        <input type="text" name="name" id="" value="" placeholder="昵称" /> <br>
        <input type="password" name="password" id="" value="" placeholder="密码" /> <br>
        <input type="email" name="" id="" value="" placeholder="邮箱" /> <br>
        <input type="tel" name="" id="" value="" placeholder="联系方式" /> <br>
        <input type="url" name="" id="" value="" placeholder="主页" /> <br>
        <input type="radio" name="gender" id="" value="male" /> 男
        <input type="radio" name="gender" id="" value="female" /> 女
        <input type="radio" name="gender" id="" value="" checked="checked" /> 未知 <br>
        <input type="checkbox" name="favorites" value="shopping" checked="checked"> 购物
        <input type="checkbox" name="favorites" value="HTML5"> HTML5 <br>
        <input type="url" name="website" id=""> <br>
        <input type="email" name="email" id="" multiple> <br>
        <input type="range" name="income" id="" min="4000" max="10000" value="7000"> <br>
        <input type="date" name="birthday" id=""> <br>
        <input type="time" name="ring" id=""> <br>
        <input type="number" name="age" id="" min="18" max="50" value="23"> <br>
        <input type="tel" name="tel" id=""> <br>
        <input type="image" src="register.png" alt="注册" width="80px"> <br>
        <input type="button" value="检查" onclick="console('模拟检查。。。');" style="min-width: 80px;" />
        <input type="reset" value="重填" style="min-width: 80px;" />
        <input type="submit" name="" id="" value="注册" style="min-width: 80px;" />
    </form>

    <hr>

    <!-- option, select, optgroup, datalist -->
    <!-- P5.15, P5.16, P5.17, P5.24 -->
    <form action="">
        火车上喝：
        <select name="eat" id="">
            <option value="beer" disabled>啤酒</option>
            <option value="beverage">饮料</option>
            <option value="mineralwater">矿泉水</option>
        </select>
        <br>
        火车上吃：
        <select name="drink" id="" autofocus>
            <option value="peanut">花生</option>
            <option value="melonseeds">瓜子</option>
            <option value="gruel">八宝粥</option>
        </select>
        <br>
        火车上禁：
        <select name="forbidden" id="" disabled>
            <option value="">刀🔪</option>
            <option value="">叉🎗</option>
            <option value="">剑🗡</option>
            <option value="">戟⚔</option>
        </select>
        <br>
        特产：
        <select name="" id="">
            <option value="">剪纸</option>
            <option value="">泥塑</option>
            <option value="">扑灰年画</option>
            <optgroup label="水果">
                <option value="">烟台苹果</option>
                <option value="">莱阳梨</option>
                <option value="">不如潍坊萝卜皮</option>
            </optgroup>
        </select>
        <br>
    </form>

    <hr>


    <!-- label -->
    <!-- P5.17 -->
    <form action="">
        <label for="username">姓名：</label>
        <input type="text" name="username" id="username">
        <br>
        <label for="password">密码：</label>
        <input type="password" name="password" id="password">
        <br>
        <input type="submit" value="登录">
    </form>

    <hr>

    <!-- fieldset, legend -->
    <!-- P5.21 -->
    <fieldset>
        <legend>注册页面</legend>
        <form action="">
            <label for="username">姓名：</label>
            <input type="text" name="username" id="username">
            <br>
            <label for="gender">密码：</label>
            <input type="text" name="gender" id="gender">
            <br>
            <input type="submit" value="注册">
        </form>
    </fieldset>

    <hr>

    <!-- textarea -->
    <!-- P5.22 -->
    <form action="">
        to: <input type="text" name="to" id="">
        <br>
        msg: <textarea name="msg" id="" cols="30" rows="10"></textarea>
        <br>
        <input type="submit" value="提交">
    </form>

    <hr>

    <!-- keygen 已废弃 -->
    <!-- P5.25 -->
    <form action="">
        <keygen name="key" keytype="rsa">
        <label for="username">姓名：</label>
        <input type="text" name="username" id="username">
        <br>
        <label for="password">密码：</label>
        <input type="password" name="password" id="password">
        <br>
        <input type="submit" value="登录">
    </form>

    <hr>

    <!-- output 表示计算结果 -->
    <!-- P5.26 -->
    <form action="" onchange="o.value = parseInt(m.value) * parseInt(n.value)">
        m: <input type="number" name="m" id="m"> <br>
        n: <input type="number" name="n" id="n"> <br>
        o: <output name="o" for="m n"></output> <br>
        <input type="submit" value="提交">
    </form>

    <hr>

    <!-- button: type -->
    <!-- P5.27 -->
    <form action="">
        <label for="username">姓名：</label>
        <input type="text" name="username" id="username" value="zhangsan">
        <br>
        <label for="password">密码：</label>
        <input type="password" name="password" id="password" value="lisi">
        <br>
        <input type="button" value="按钮">
        <input type="reset" value="重置">
        <input type="submit" value="提交">
    </form>


</body>

</html>